<template>
  <div class="app-container">
    <div class="left">
      <div class="filter-container select">
        <Select 
          clearable 
          filterable 
          placeholder="组员筛选" 
          v-model="members">
          <Option 
            v-for="item in memberList" 
            :key="item.userId" 
            :value="item.userId">
            {{item.name}}
          </Option>
        </Select>
        <DatePicker 
          v-model="DataTime" 
          type="month" 
          placeholder="时间筛选"
        ></DatePicker>
      </div>
      <div class="filter-container">
        <h3 class="map-title">品牌占比<span class="unit">（单位：%）</span></h3>
        <Pie id="pie1" :initData="memberInfo.list_brandRace"></Pie>
      </div>
      <div class="filter-container">
        <h3 class="map-title">成本中心占比<span class="unit">（单位：%）</span></h3>
        <Pie id="pie2" :initData="memberInfo.list_centerRace"></Pie>
      </div>
    </div>
    <div class="right">
      <div class="userInfo">
        <div class="filter-container grade">
          <div class="grade-item">
            <p class="grade-item-title">本月KPI总分</p>
            <div class="grade-item-count"><span>{{memberInfo.kpiSumScore || 0}}</span>分</div>
          </div>
          <div class="grade-item">
            <p class="grade-item-title">本月创意物料数量</p>
            <div class="grade-item-count"><span>{{memberInfo.kpiSumMateriak || 0}}</span>个</div>
          </div>
          <div class="grade-item">
            <p class="grade-item-title">本月修改物料数量</p>
            <div class="grade-item-count"><span>{{memberInfo.list_materialUpdate || 0}}</span>个</div>
          </div>
        </div>
        <div class="filter-container item">
          <div style="text-align: center;">
            <Icon type="md-contact" size="40" color="#a7a7a7"/>
          </div>
          <div class="name">姓名：{{currentPeople.name || '' }}</div>
          <div class="name">工号：{{currentPeople.userId || ''}}</div>
        </div>
      </div>
      <div class="filter-container">
        <h3>物料单位（个）</h3>
        <Bar :initData="memberInfo.list_materialRace"></Bar>
        <div class="bar-btn">
          <Button type="success" :disabled="!isDisabled" @click="downExcel">导出报表</Button>
          <Button 
            style="margin-left:20px;"
            type="success" 
            :disabled="!DataTime" 
            @click="downAllExcel"
          >导出全部报表</Button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Pie from './components/pie.vue'
import Bar from './components/bar.vue'
import { mapGetters } from 'vuex'
import { getUser45, getUserTesk } from '@/api/intraClass'
import format from "date-format";
export default {
  data() {
    return  {
      members: '',
      memberList: [],
      DataTime: new Date(),
      memberInfo: {},
      // 导出按钮禁用
      isDisabled: false,
    }
  },
  components: {
    Pie,
    Bar
  },
  created() {
    this.initAllMember()
  },
  methods: {
    // 导出某人月度报表
    downExcel() {
      const Mount = new Date(this.DataTime || '').getMonth()
      const Year = new Date(this.DataTime || '').getFullYear()
      const startTime = format("yyyy-MM-dd", new Date(Year, Mount, 1))
      const endTime = format("yyyy-MM-dd", new Date(Year, Mount + 1, 0))
      const href = `${process.env.BASE_URL}/task/downloadUserTesk?startTime=${startTime}&endTime=${endTime}&userId=${this.members}`
      window.open(href, '_blank')
    },

    // 根据权限导出报表
    downAllExcel() {
      const Mount = new Date(this.DataTime || '').getMonth()
      const Year = new Date(this.DataTime || '').getFullYear()
      const startTime = format("yyyy-MM-dd", new Date(Year, Mount, 1))
      const endTime = format("yyyy-MM-dd", new Date(Year, Mount + 1, 0))
      const href = `${process.env.BASE_URL}/task/downloadUserTeskAll?startTime=${startTime}&endTime=${endTime}&userId=${this.userId}`
      window.open(href, '_blank')
    },

    // 获取组员详细页面数据
    async getMemberData() {
      const Mount = new Date(this.DataTime || '').getMonth()
      const Year = new Date(this.DataTime || '').getFullYear()
      try {
        const {data = {}} = await getUserTesk({
          startTime: format("yyyy-MM-dd", new Date(Year, Mount, 1)),
          endTime: format("yyyy-MM-dd", new Date(Year, Mount + 1, 0)),
          userId: this.members
        })

        data.list_brandRace = data.list_brandRace.map(sub => {
          return {
            value: sub.count,
            name: sub.name
          }
        })
        data.list_centerRace = data.list_centerRace.map(sub => {
          return {
            value: sub.userBrandScoreCount,
            name: sub.name
          }
        })

        data.list_materialRace = data.list_materialRace.map(item => {
          return {
            name: `${item.firstMaterial}/${item.secondMaterial}`,
            count: item.count
          }
        })
        this.memberInfo = data
      } catch(err) {
        return err
      }
    },

    // 获取全部组员列表
    async initAllMember() {
      try {
        const {data = [] } = await getUser45()
        this.memberList = data
        this.members = this.memberList[0].userId

      } catch(err) {
        return err
      }
    }
  },
  computed: {
    ...mapGetters(["name", "userId"]),
    requestData() {
      let {members, DataTime} = this
      return {members, DataTime}
    },
    currentPeople() {
      return this.memberList.find(item => item.userId === this.members) || {}
    }
  },
  watch: {
    requestData: {
      handler(data) {
        const list = Object.values(data)
        this.isDisabled = list.every(item => item)
        if(this.isDisabled) {
          this.getMemberData()
        }
      },
      deep: true,
    }
  }
}
</script>

<style lang="less" scoped>
  .app-container {
    width: 100%;
    height: 100%;
    display: flex;
    .filter-container {
      border-radius: 8px;
      margin-bottom: 10px;
      background-color: #fff;
      padding: 15px;
    }
    .left {
      width: 28%;
      height: 100%;
      margin-right: 10px;
      .select {
        display: flex;
        height: 120px;
      }
      .map-title {
        text-align: center;
        font-size: 14px;
        .unit {
          color: #999;
        }
      }
      /deep/ .ivu-select-single .ivu-select-selection {
        flex: 1;
        border-radius: 20px;
        padding: 0 10px;
        margin: 0 4px;
      }
      /deep/ .ivu-input-with-suffix {
        flex: 1;
        border-radius: 20px;
        // padding-left: 16px;
        width: 125px;
        margin: 0 4px;
      }
    }
    .right {
      width: 70%;
      height: 100%;
      .userInfo {
        display: flex;
        width: 100%;
        height: 130px;
        .grade {
          flex: 9;
          margin-right: 10px;
          display: flex;
          .grade-item {
            flex: 1;
            margin: 0 5px;
            border-radius: 10px;
            .grade-item-title {
              color: #fff;
              font-size: 16px;
              text-align: center;
              margin-top: 10px;
            }
            .grade-item-count {
              text-align: center;
              font-size: 16px;
              color: #fff;
              >span {
                font-size: 38px;
                font-weight: 600;
              }
            }
          }
        }
        .grade .grade-item:nth-child(1) {
          background: #d22158;
        }
        .grade .grade-item:nth-child(2) {
          background: #dc3c3c;
        }
        .grade .grade-item:nth-child(3) {
          background: #bb3b88;
        }
        .item {
          flex: 2;
          .name {
            font-size: 16px;
            font-weight: 500;
          }
        }
      }
      .bar-btn {
        padding-bottom: 20px;
        text-align: center;
        /deep/ .ivu-btn-success {
          background-color: #d01952;
          border-color: #d01952;
          width: 120px;
        }
      }
    }
  }
</style>